<!-- 页面 -->
<template>
	<view class="ss-user-info-wrap" :class="isLogin?'ss-user-info-wrap-wxw':'z-index0'">
		<view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
			<view class="left-box ss-flex ss-col-center ss-m-l-36">
				<view class="avatar-box ss-m-r-24">
					<image class="avatar-img" style="cursor: pointer" :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar, 'https://wkadmin.jhpress.com/')
                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
            " mode="aspectFill" @tap="sheep.$router.go(isLogin?'/pages/index/user':'/pages/index/login')"></image>
				</view>
				<view>
					<view class="nickname-box ss-flex ss-col-center">
						<view class="nick-name ss-m-r-20" style="cursor: pointer" @tap="sheep.$router.go(isLogin?'/pages/index/user':'/pages/index/login')">{{ userInfo?.username || username }}</view>
					</view>
				</view>
			</view>
		</view>
    <view class="usercard">
      <dl>
        <dd @tap="sheep.$router.go('/pages/index/user')">个人中心</dd>
        <dd @tap="onLogout()">退出登录</dd>
      </dl>
    </view>
	</view>
</template>

<script setup>
	/**
	 * 用户卡片
	 *
	 * @property {Number} leftSpace 									- 容器左间距
	 * @property {Number} rightSpace 									- 容器右间距
	 *
	 * @property {String} avatar 					- 头像
	 * @property {String} nickname 					- 昵称
	 * @property {String} vip		  				- 等级
	 * @property {String} collectNum 				- 收藏数
	 * @property {String} likeNum 					- 点赞数
	 *
	 *
	 */
	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showAuthModal
	} from '@/sheep/hooks/useModal';

	// 用户信息
	const userInfo = computed(() => sheep.$store('user').userInfo);



	// 是否登录
	const isLogin = computed(() => sheep.$store('user').isLogin);
	// 接收参数
	const props = defineProps({
		background: {
			type: String,
			default: '',
		},
		// 头像
		avatar: {
			type: String,
			default: '',
		},
		username: {
			type: String,
			default: '请先登录',
		},
		vip: {
			type: [String, Number],
			default: '1',
		},
		collectNum: {
			type: [String, Number],
			default: '1',
		},
		likeNum: {
			type: [String, Number],
			default: '1',
		},
	});

	function onBind() {
		showAuthModal('changeMobile');
	}
  function onLogout() {
    uni.showModal({
      title: '提示',
      content: '确认退出账号？',
      success: async function (res) {
        if (res.confirm) {
          const result = await sheep.$store('user').logout();
          if (result) {
            sheep.$router.go('/pages/index/index');
          }
        }
      },
    });
  }
</script>

<style lang="scss" scoped>
  .ss-user-info-wrap-wxw:hover{

    .usercard{
      background-color: #FFFFFF;
      position: absolute;
      z-index: 10;
      width: 160px;
      display: block;
      top:40px;
      left: 20px;
      box-shadow: 0px 0px 13px -1px rgba(61, 46, 46, 0.18);
      border-radius: 4px;
      padding: 10px 0px 10px 0px;
      dl{
        dd{
          line-height: 38px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
  .z-index0{
    z-index: 0;
  }

	.ss-user-info-wrap {
    height: 40px;
    box-sizing: border-box;
.usercard{
  display: none;
}

    .avatar-box {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;

      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }

    .nick-name {
      font-size: 17px;
      font-weight: 400;
      color: #333333;
      line-height: normal;
    }
  }

</style>